<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<script src="../vue相关(cdn引入/js/v2.6.10/vue.js"></script>
<link rel="stylesheet" href="../common.css" />
<style>
  .container {
    width: 200px;
    height: 200px;
    position: relative;
    /* transform: rotateX(55deg); */
  }

  svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .container circle {
    fill: none;
  }

  .outer-circle {
    transform-origin: center;
    animation: rotate 3s infinite linear;
  }

  .inner-circle {
    transform-origin: center;
    animation: rotate 2s infinite linear reverse;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(1turn);
    }
  }

  .container span {
    font-family: "Bahnschrift";
    text-anchor: middle;
    fill: white;
    font-size: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<body>
  <div id="app">
    <div class="container">
      <svg viewBox="0 0 100 100">
        <mask id="mask">
          <!-- 用一个蒙版mask -->
          <circle cx="50" cy="50" r="40" stroke-dasharray="5 0.5" stroke-width="5" stroke="#fff"></circle>
        </mask>
        <!-- 设置底部最大的圆环 -->
        <circle cx="50" cy="50" r="40" stroke-dasharray="5 0.5" stroke-width="5" stroke="#112E3C"></circle>
        <!-- 设置进度条的颜色、长度等，覆盖蒙版 -->
        <circle cx="50" cy="50" r="40" :stroke-dasharray="getCircleDash(curr, total, 40)" stroke-width="5"
          stroke="rgb(131, 231, 231)" mask="url(#mask)" class="outer-circle"></circle>
      </svg>
      <svg viewBox="0 0 100 100">
        <mask id="mask1">
          <!-- 用一个蒙版mask -->
          <circle cx="50" cy="50" r="30" stroke-dasharray="5 0.8" stroke-width="5" stroke="#fff"></circle>
        </mask>
        <!-- 设置底部最大的圆环 -->
        <circle cx="50" cy="50" r="30" stroke-dasharray="5 0.8" stroke-width="5" stroke="#112E3C"></circle>
        <!-- 设置进度条的颜色、长度等，覆盖蒙版 -->
        <circle cx="50" cy="50" r="30" :stroke-dasharray="getCircleDash(curr, total, 40)" stroke-width="5"
          stroke="aqua" mask="url(#mask1)" class="inner-circle"></circle>
      </svg>
      <span> {{ getPercent(curr, total) }}%</span>
    </div>
  </div>
</body>
<script>
  new Vue( {
    el: "#app",
    data () {
      return {
        total: 200,
        curr: 100,
      };
    },
    methods: {
      getPercent ( e1, e2 ) {
        return ( ( 100 * e1 ) / e2 ).toFixed( 0 );
      },
      getCircleDash ( e1, e2, r ) {
        let girth = 2 * Math.PI * r;
        return ( e1 / e2 ) * girth + " " + girth;
      },
      getDash ( r ) {
        return r * 0.3 + " " + r * 0.1;
      },
    },
  } );
</script>

</html>